<script setup lang="ts">
import { ref} from 'vue'
import type { Ref } from 'vue'
import { YiTable, YiAction } from '@uublue/yimi-element-plus'
import DictForm from './dict-form.vue'
import pinia from '@/stores/index'
import { usePage } from '@/stores/page'

const pageStore = usePage(pinia)
const selectedMenu = ref()
const rootDictItemsTable: Ref<typeof YiTable | undefined> = ref()
const subDictItemsTable: Ref<typeof YiTable | undefined> = ref()

function refreshSubDictItemsTable() {
  if (selectedMenu.value) {
    subDictItemsTable.value?.refresh()
  } else {
    subDictItemsTable.value?.clear()
  }
}

function clearRootDictItemsTable() {
  if (rootDictItemsTable.value) {
    rootDictItemsTable.value?.setCurrentRow()
  }
}

</script>

<script lang="ts">
import dictApis from '@/apis/system/dict'
const { queryRootDictItems, listSubDictItems, addSubDictItem, removeDictItem } = dictApis

export default {
  name: 'DictView',
  apis: {
    queryRootDictItems,
    listSubDictItems,
    addSubDictItem,
    removeDictItem
  },
}
</script>

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6" :xs="0">
        <YiTable
          ref="rootDictItemsTable"
          :api="queryRootDictItems"
          :columns="[
            {
              label: '字典分类',
              prop: 'label'
            },
            {
              label: '说明',
              prop: 'remark',
              showOverflowTooltip: true
            }
          ]"
          highlight-current-row
          @current-row-change="
            (currentRow) => {
              if (!currentRow) {
                selectedMenu = undefined
              } else {
                selectedMenu = currentRow
              }
              refreshSubDictItemsTable()
            }
          "
          @on-search-success="
            () => {
              clearRootDictItemsTable()
            }
          "
        >
          <template #pagination="{ currentPage, pageSize, total, onSizeChange, onCurrentChange }">
            <el-pagination
              background
              :current-page="currentPage"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next"
              :pager-count="5"
              :total="total"
              @size-change="onSizeChange"
              @current-change="onCurrentChange"
            />
          </template>
        </YiTable>
      </el-col>
      <el-col :span="18" :xs="0">
        <YiTable
          ref="subDictItemsTable"
          :init="false"
          :api="
            () => {
              return listSubDictItems(selectedMenu.id)
            }
          "
          :columns="[
            {
              label: '字典项名称',
              prop: 'label'
            },
            {
              label: '字典编码',
              prop: 'code'
            },
            {
              label: '说明',
              prop: 'remark',
              showOverflowTooltip: true
            },
            {
              label: '操作',
              prop: 'opt',
              slot: 'opt'
            }
          ]"
          :tools="[]"
          :res-adapter="
            (res) => {
              return {
                rows: res.data
              }
            }
          "
        >
          <template #actions="{ refresh }">
            <!-- 新增 -->
            <yi-action
              :api="
                () => {
                  return addSubDictItem({ parentId: selectedMenu.id })
                }
              "
              text="新增"
              type="primary"
              size="small"
              :plain="true"
              icon="el-icon-plus"
              modal-title="添加子项"
              dialog-width="700px"
              :disabled="typeof selectedMenu == 'undefined'"
              model-reserve="never"
              @on-submit-success="refresh"
            >
              <template #default="scope">
                <dict-form v-model="scope.model" :form-ref="scope.form" use-for="add" />
              </template>
            </yi-action>
          </template>

          <template #tools="{ refresh }">
            <el-tooltip class="item" effect="dark" content="刷新" placement="top">
              <el-button
                circle
                size="small"
                icon="el-icon-refresh"
                :disabled="typeof selectedMenu == 'undefined'"
                @click="() => {
                  refresh()
                }"
              >
              </el-button>
            </el-tooltip>
          </template>

          <template #opt="{ row, refresh }">
            <yi-action
              v-model:loading="pageStore.loading"
              title="删除"
              :api="removeDictItem(row.id)"
              type="primary"
              trigger="link"
              :underline="false"
              text="删除"
              size="default"
              icon="el-icon-delete"
              :disabled="row.undeletable"
              confirm-text="是否删除该字典项？"
              @on-submit-success="refresh"
            />
          </template>
        </YiTable>
      </el-col>
    </el-row>
  </div>
</template>
